import React, { useState } from "react";

import { useMediaQuery } from "@definitions/helpers";

type CardInfo = {
    title: string;
    description: string;
    link: string;
    iconUrl: string;
};

const cards: CardInfo[] = [
    {
        title: "Documentation",
        description:
            "Learn about the technical details of using refine in your projects.",
        link: "https://refine.dev/",
        iconUrl:
            "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/book.svg",
    },
    {
        title: "Tutorial",
        description:
            "Learn how to use refine by building a fully-functioning CRUD app, from scratch to full launch.",
        link: "https://refine.dev/docs/tutorial/introduction/index/",
        iconUrl:
            "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/hat.svg",
    },
    {
        title: "Examples",
        description:
            "A collection of reference applications you can use as a starting point.",
        link: "https://refine.dev/examples",
        iconUrl:
            "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/application.svg",
    },
    {
        title: "Community",
        description:
            "Join our Discord community and keep up with the latest news.",
        link: "https://discord.gg/refine",
        iconUrl:
            "https://refine.ams3.cdn.digitaloceanspaces.com/welcome-page/discord.svg",
    },
];

/**
 * It is a page that welcomes you after the configuration is completed.
 */
export const WelcomePage: React.FC = () => {
    const isTablet = useMediaQuery("(max-width: 1010px)");
    const isMobile = useMediaQuery("(max-width: 650px)");

    const getGridTemplateColumns = () => {
        if (isMobile) {
            return "1, 280px";
        } else if (isTablet) {
            return "2, 280px";
        } else {
            return "4, 1fr";
        }
    };

    const getHeaderFontSize = () => {
        if (isMobile) {
            return "32px";
        } else if (isTablet) {
            return "40px";
        } else {
            return "48px";
        }
    };

    const getSubHeaderFontSize = () => {
        if (isMobile) {
            return "16px";
        } else if (isTablet) {
            return "20px";
        } else {
            return "24px";
        }
    };

    return (
        <div
            style={{
                position: "fixed",
                zIndex: 10,
                inset: 0,
                overflow: "auto",
                width: "100dvw",
                height: "100dvh",
            }}
        >
            <div
                style={{
                    overflow: "hidden",
                    position: "relative",
                    backgroundSize: "cover",
                    backgroundRepeat: "no-repeat",
                    background: isMobile
                        ? "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp), radial-gradient(88.89% 50% at 50% 100%, rgba(38, 217, 127, 0.10) 0%, rgba(38, 217, 127, 0.00) 100%), radial-gradient(88.89% 50% at 50% 0%, rgba(71, 235, 235, 0.15) 0%, rgba(71, 235, 235, 0.00) 100%), #1D1E30"
                        : isTablet
                        ? "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp), radial-gradient(66.67% 50% at 50% 100%, rgba(38, 217, 127, 0.10) 0%, rgba(38, 217, 127, 0.00) 100%), radial-gradient(66.67% 50% at 50% 0%, rgba(71, 235, 235, 0.15) 0%, rgba(71, 235, 235, 0.00) 100%), #1D1E30"
                        : "url(https://refine.ams3.cdn.digitaloceanspaces.com/website/static/assets/landing-noise.webp), radial-gradient(35.56% 50% at 50% 100%, rgba(38, 217, 127, 0.12) 0%, rgba(38, 217, 127, 0) 100%), radial-gradient(35.56% 50% at 50% 0%, rgba(71, 235, 235, 0.18) 0%, rgba(71, 235, 235, 0) 100%), #1D1E30",
                    minHeight: "100%",
                    minWidth: "100%",
                    fontFamily: "Arial",
                    color: "#FFFFFF",
                }}
            >
                <div
                    style={{
                        zIndex: 2,
                        position: "absolute",
                        width: isMobile ? "400px" : "800px",
                        height: "552px",
                        opacity: "0.5",
                        background:
                            "url(https://refine.ams3.cdn.digitaloceanspaces.com/assets/welcome-page-hexagon.png)",
                        backgroundRepeat: "no-repeat",
                        backgroundSize: "contain",
                        top: "0",
                        left: "50%",
                        transform: "translateX(-50%)",
                    }}
                />
                <div style={{ height: isMobile ? "40px" : "80px" }}></div>
                <div style={{ display: "flex", justifyContent: "center" }}>
                    <div
                        style={{
                            backgroundRepeat: "no-repeat",
                            backgroundSize: isMobile
                                ? "112px 58px"
                                : "224px 116px",
                            backgroundImage:
                                "url(https://refine.ams3.cdn.digitaloceanspaces.com/assets/refine-logo.svg)",
                            width: isMobile ? 112 : 224,
                            height: isMobile ? 58 : 116,
                        }}
                    />
                </div>
                <div
                    style={{
                        height: isMobile
                            ? "120px"
                            : isTablet
                            ? "270px"
                            : "40vh",
                        minHeight: isMobile
                            ? "120px"
                            : isTablet
                            ? "270px"
                            : "270px",
                    }}
                ></div>
                <div
                    style={{
                        display: "flex",
                        flexDirection: "column",
                        gap: "16px",
                        textAlign: "center",
                    }}
                >
                    <h1
                        style={{
                            fontSize: getHeaderFontSize(),
                            fontWeight: 700,
                            margin: "0px",
                        }}
                    >
                        Welcome Aboard!
                    </h1>
                    <h4
                        style={{
                            fontSize: getSubHeaderFontSize(),
                            fontWeight: 400,
                            margin: "0px",
                        }}
                    >
                        Your configuration is completed.
                    </h4>
                </div>
                <div style={{ height: "64px" }}></div>
                <div
                    style={{
                        display: "grid",
                        gridTemplateColumns: `repeat(${getGridTemplateColumns()})`,
                        justifyContent: "center",
                        gap: "48px",
                        paddingRight: "16px",
                        paddingLeft: "16px",
                        paddingBottom: "32px",
                        maxWidth: "976px",
                        margin: "auto",
                    }}
                >
                    {cards.map((card) => (
                        <Card key={`welcome-page-${card.title}`} card={card} />
                    ))}
                </div>
            </div>
        </div>
    );
};

type CardProps = {
    card: CardInfo;
};

const Card: React.FC<CardProps> = ({ card }) => {
    const { title, description, iconUrl, link } = card;

    const [isHover, setIsHover] = useState(false);

    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                gap: "16px",
            }}
        >
            <div
                style={{
                    display: "flex",
                    alignItems: "center",
                }}
            >
                <a
                    onPointerEnter={() => setIsHover(true)}
                    onPointerLeave={() => setIsHover(false)}
                    style={{
                        display: "flex",
                        alignItems: "center",
                        color: "#fff",
                        textDecoration: "none",
                    }}
                    href={link}
                >
                    <div
                        style={{
                            width: "16px",
                            height: "16px",
                            backgroundPosition: "center",
                            backgroundSize: "contain",
                            backgroundRepeat: "no-repeat",
                            backgroundImage: `url(${iconUrl})`,
                        }}
                    />
                    <span
                        style={{
                            fontSize: "16px",
                            fontWeight: 700,
                            marginLeft: "13px",
                            marginRight: "14px",
                        }}
                    >
                        {title}
                    </span>
                    <svg
                        style={{
                            transition:
                                "transform 0.5s ease-in-out, opacity 0.2s ease-in-out",
                            ...(isHover && {
                                transform: "translateX(4px)",
                                opacity: 1,
                            }),
                        }}
                        width="12"
                        height="8"
                        fill="none"
                        opacity="0.5"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M7.293.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L8.586 5H1a1 1 0 0 1 0-2h7.586L7.293 1.707a1 1 0 0 1 0-1.414Z"
                            fill="#fff"
                        />
                    </svg>
                </a>
            </div>
            <span
                style={{
                    fontSize: "12px",
                    opacity: 0.5,
                    lineHeight: "16px",
                }}
            >
                {description}
            </span>
        </div>
    );
};
